<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../dist/vue.js"></script>
</head>

<body>
  <!--

  模板的编译原理
  AST语法树(树的遍历) 先表示出html，html==> 转化成js ==> 虚拟dom ==> 真实dom ==> 渲染

  1、模板需要编程render方法 render() {return _c(2, 'li', {}, msg)}
  2、当前的实例上去取值 with
  3、render产生的是虚拟dom ==> 虚拟DOM ==> 可以描述dom结构 ==> diff算法(对比) ==> 缓存
  4、生成真实的dom结构，渲染到页面中
-->
  <div id="app" class="test" style="color: red; background: green">
    <div style="color: red">
      <p>hello</p>
      <h1 style="color: red">{{hello}}</h1>
      <h2>test</h2>
      <span v-show="true" @click="handleClick">{{name}}</span>
    </div>
  </div>
  <script>
    // 响应式数据变化，数据代理 Object.defineProperty(数据劫持)
    const vm = new Vue({
      // tree-shaking
      el: "#app",
      data() {
        return {
          msg: "信息",
          age: 18,
          arr: [1, {msg: 1}, 2, 3], // vue数组种的对象如果变化了也需要更新视图，对象也应该劫持
          obj: {
            age: 123,
          }
        };
      },
      methods: {
        fn() {
          console.log('执行')
        },
      },
      watch: {},
      computed: {},
      // template() {},
      // render() {}
    });

      // vm.$options;
  </script>
</body>

</html>
